<template>
  <div class="cmm-container">
    <h3>发表评论</h3>

    <hr>

    <textarea placeholder="请输入要评论的内容(不超过120个字)" v-model="commenttext"></textarea>
    <mt-button type="primary" size="large" @click="postcomment">发表评论</mt-button>

    <div class="cmm-list">
      <div class="cmm-list-item" v-for="(item, index) in commentList" :key="index">
        <div
          class="cmm-title"
        >第{{ index+1 }}楼&nbsp;&nbsp;用户：{{ item.use_name }}&nbsp;&nbsp;发表时间：{{ item.add_time }}</div>
        <div class="cmm-content">{{ item.content }}</div>
      </div>
    </div>

    <mt-button type="danger" size="large" plain @click="loadmore">加载更多</mt-button>
  </div>
</template>

<script>

import { Toast } from 'mint-ui';
export default {
  data() {
    return {
      commentList: [],
      pageIndex: 1,
      commenttext: ""
    };
  },
  created() {
    this.getCommonList();
  },
  methods: {
    getCommonList() {
      //未加上接口向后台传分页页码和该新闻id，真实开发需加上
      this.$http.get("./../../../api/newscomment.json").then(res => {
        if (res.body.status === 0) {
          //concat  实现数组的拼接
          this.commentList = this.commentList.concat(res.body.message);
          this.pageIndex++;
        } else {
          alert("error");
        }
      });
    },
    loadmore() {
      this.getCommonList();
    },
    postcomment() {
      if (this.commenttext.trim().length === 0) {
        return Toast("评论内容不能为空!");
      }
      //评论post请求
      // this.$http.post('评论接口/' +this.$route.params.id, { content: this.commenttext })
      //   .then(res => {
      //     if(res.body.status === 0) {
      var msg = {
        use_name: "巧客户",
        add_time: new Date(),
        content: this.commenttext
      };
      this.commentList.unshift(msg);
      Toast("评论成功!");
      this.commenttext = "";
      //     }else {
      //       Toast('评论失败!');
      //     }
      // })
    }
  },
  props: ['id']
};
</script>

<style>
.cmm-container h3 {
  font-size: 18px;
  margin-top: 30px;
}

.cmm-container textarea {
  height: 85px;
  margin: 0;
  font-size: 14px;
}
.cmm-list {
  margin: 10px 0;
}
.cmm-list-item {
  font-size: 13px;
}

.cmm-list .cmm-title {
  line-height: 30px;
  background-color: #ccc;
}

.cmm-list .cmm-content {
  line-height: 35px;
  text-indent: 2em;
}
</style>
